<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        *{margin:0;padding:0;}
    header
    {
        width: 100%;
        height: 40px;
        background-color: rgb(51,51,51);
    }
    .top-left-div
    {
        width: 75%;
        height: 40px;
        float: left;
    }
    .top-right-div
    {
        width: 13%;
        height: 40px;
        float: left;
    }
     .topul
     {
         list-style: none;
         margin-left: -30px;
         margin-top: 12px;

     }
    .topul li
    {
        list-style: none;
        color: silver;
        font-size: 12px;
        font-weight:600;
       display: inline;
        margin-left: 4px;
    }
    .topul li span:hover
    {
        color: white;
    }
    .topul>span
        {
            margin-left: 4px;
            color: dimgray;
        }
        .top-right-div .shopcardiv img
        {
            width: 16px;
            height: 16px;
        }
    .shopcardiv
    {
        width: 10%;
        height: 40px;
        float: left;
        background-color:rgb(75,75,75);;
    }
    .shopcardiv .img1
    {
        width: 25px;
        height: 25px;
        margin-top: 7px;
        margin-left: 10px;
        vertical-align: middle;
    }
    .shopcardiv .img2
    {
        width: 25px;
        height: 25px;
        margin-top: 7px;
        margin-left: 10px;
        vertical-align: middle;
        display: none;
    }
    .shopcardiv li
    {
        list-style: none;
        margin-top: -20px;
        margin-left: 40px;
    }
    .shopcardiv span
    {
        font-size:12px;
        color: silver;
    }
    .shopcardiv:hover
    {
        background-color: white;
    }
    .shopcardiv:hover span
    {
        color: firebrick;
        font-weight: 700;
    }
    .shopcardiv:hover .img1
    {
        display: none;
    }
    .shopcardiv:hover .img2
    {
        display: block;
    }
    section
    {
        height: 6750px;
    }
    .fixedul1
    {
        list-style: none;
        z-index:1000 !important;
        text-align: center;
    }
    .fixedul1 li
    {
        list-style: none;
        height: 26px;
        line-height: 26px;
        float: top;
        margin-top: 8px;
        margin-bottom: 8px;
        width: 80px;
        background-color:white;
        display: none;
    }
        .fixedul1 li span
        {
            color: dimgray;
        }

    .fixedul
    {
        z-index:1000 !important;
        text-align: center;
    }

    .fixedul li
    {
        display: block;
        list-style: none;
        height: 34px;
        line-height: 34px;
        float: top;
        width: 24px;
        border: 1px solid gainsboro ;
        z-index:1000 !important;
        background-color: white;
        text-align: center;
    }
    .fixedul li img
    {
        width: 16px;
        height: 20px;
        margin-top: 7px;
    }
        .section1
        {
            height: 100px;

        }
        .section1-left
        {
            float: left;
            width: 15%;
            height: 100px;
        }
    .section1-middle
    {
        float: left;
        width: 55%;
        height: 100px;
    }
    .section1-right
    {
        float: left;
        width: 30%;
        height: 100px;
    }
    .section1-right .rightdiv:hover
    {
        background-color: coral;
    }
    .section1-right div .img2 {
        display: none;
    }
    .section1-right div:hover .img1
    {
        display: none;
    }
    .section1-right div:hover .img2
    {
        display: block;
    }
    .float-shoppingcar
    {
        width: 90%;
        height: 100%;
        line-height: 100px;
        margin-left: 4%;
        text-align: center;
        display: none;
        border:1px solid gainsboro;
        background-color: white;
    }
    .float-shoppingcar span
    {
        font-size: 14px;
        color: gray;
    }
        .xiaomilogodiv
        {
            width: 60px;
            height: 60px;
            background-color: darkorange;
            margin-top: 20px;
            margin-left: 15px;
        }
    .xiaomilogodiv .img1
    {
        width: 40px;
        height: 40px;
        margin: 10px 10px;
    }
    .xiaomilogodiv .img2
    { width: 30px;
        height: 30px;
        padding-top: 15px;
        padding-left: 15px;
        display: none;
    }
    .xiaomilogodiv:hover .img1
    {
        display: none;
    }
    .xiaomilogodiv:hover .img2
    {
        display: block;
    }
    .section1-middle-ul
    {
        list-style: none;
        margin-left: 0px;
margin-top: 40px;
    }
    .section1-middle-ul li
    {
        list-style: none;
        color: black;
        font-size: 15px;
        font-weight:600;
        float: left;
        display: block;
        width: 70px;
        height: 60px;
        /*border-left: 1px solid  blue;*/
        text-align: center;
    }
    .section1-middle-ul li:hover
    {
        color: indianred;
    }
    .section2
    {
        height: 475px;
    }
        #section2-float-div
        {
            height: 230px;
            display: none;
            z-index: 1000;
            border-top: 1px solid gainsboro;
            position: absolute;
            top: 140px;
            background-color: white;
            width: 100%;
        }
    #section2-float-div>div>div
    {
        float: left;
        width: 16%;
        height: 100%;
    }
    #section2-float-div>div>div>div:nth-child(1)
    {
        float: top;
        width: 100%;
        height:120px;
        margin-top: 30px;
        border-left: 1px solid gainsboro;
    }
    #section2-float-div>div>div>div:nth-child(1) img
    {

        width: 70%;
        height:120px;
        margin-left: 15%;
    }
    #section2-float-div>div>div>div:nth-child(2)

    {
        float: top;
        width: 100%;
        height:80px;
    }
    #section2-float-div>div>div>div:nth-child(2) li:nth-child(1)
    {
    list-style: none;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }
    #section2-float-div>div>div>div:nth-child(2) li:nth-child(2)
    {
        list-style: none;
        font-size: 13px;
        text-align: center;
        margin-top: 5px;
        color: coral;
    }
        .section2-left-div
        {
            width: 20%;
            height: 460px;
            float: left;
            margin-left: 15px;
            background-color: darkgray;
            margin-top: 0px;
        }
        .section2-right-div
        {
            width: 77%;
            height: 460px;
            float: left;
        }
        .section2-left-div-ul
        {  list-style: none;
            margin-top: 30px;
            width: 100%;
            height: 400px;
            margin-left:0px;
        }
        .section2-left-div-ul li
        {
            height: 40px;
            line-height: 40px;
            width: 100%;
            list-style: none;
        }
    .section2-left-div-ul li span
    {
        color: white;
        margin-left: 30px;
        font-weight: 600;
    }
    .section2-left-div-ul li img {
        width: 30px;
        height: 30px;
        margin-left: 100px;
        vertical-align: middle;
    }
        .section2-left-div li:hover
        {
            background-color: coral;
        }
        .section2-right-div img
        {
            width: 100%;
            height: 100%;
        }
        .section2-right-div>.keydiv:hover
        {
            background-color: dimgray;
        }
    .section2-right-div ul
    {
        position:absolute;
        left: 800px;
        top:390px;
        color: gray;
        display: inline;

    }
    .section2-right-div ul li
    {
        list-style-type:circle;
        font-size: 40px;
        float: left;
        margin-left: 20px;
    }
    .section2-right-div ul li:hover
    {
        color: coral;
    }

    .float-div1
    {
        display: none;
    }
    .float-div1
    {
        width: 1000px;
        height: 460px;
        z-index: 1000;
        border: 1px solid gainsboro;
        position: absolute;
        background-color: white;
        left: 0%;
        top: 0px;
    }
    .float-div1 >div
    {
        float: left;
        width: 250px;
        height: 460px;
    }
    .float-div1 >div span
    {
        font-size: 14px;
        color: dimgray;
        margin-left: 20px;
    }
    .float-div1 >div li:hover span
    {
        color: orangered;
    }
    .float-div1 >div li
    {
        list-style: none;
        width: 100%;
        height: 76px;
        line-height: 76px;
        float: top;
    }
    .float-div1>div li img
    {
        width: 40px;
        height: 40px;
        margin-left: 20px;
        /*margin-top: 18px;*/
        vertical-align: middle;
    }

    .section3
       {
           height: 200px;
       }
        .section3 .section3-div1
        {
            width: 20%;
            height: 170px;
            float: left;
            margin-left: 15px;
            background-color: dimgray;
        }
        .section3-div1>div
        {
            float: top;
            height: 50%;
            border-top:1px solid lightgray;
        }
        .section3-div1>div>div
        {
            float: left;
            width: 32%;
            height: 100%;
            border-right: 1px solid lightgray;
            text-align: center;
        }
    .section3-div1>div>div img
    {
        width: 40%;
        height: 40%;
        margin-left: 0px;
        margin-top: 20%;
    }
    .section3-div1>div>div li
    {
        list-style: none;
    }
    .section3-div1>div>div span
    {
        color: whitesmoke;
        font-size: 14px;
        margin-top: 10px;
    }
    .section3 .section3-div2
    {
        width: 24%;
        height: 170px;
        float: left;
        margin-left: 20px;
        background-color: coral;
    }
    .section3 .section3-div2 img
    {
        width: 100%;
        height: 100%;
    }
        .section4
        {
            height: 400px;
            width: 100%;
            background-color: whitesmoke;
        }
        .section4-topdiv
        {
            height: 60px;
            line-height: 60px;
        }
    .section4-topdiv li
    {
        list-style: none;
        display: inline ;
        height: 40px;
        line-height: 40px;
        display: block;
        float: left;
        margin-top: 10px;
    }
        .section4-bottomdiv
        {
            height: 340px;
        }
    .section4-bottomdiv .section4-bottomdiv-div1
    {
        float: left;
        height: 340px;
        width: 20%;
        margin-left: 15px;
        background-color: palegoldenrod;
    }
    .section4-bottomdiv .section4-bottomdiv-div2
    {
        float: left;
        height: 340px;
        width: 18%;
        margin-left: 15px;
        background-color: palegoldenrod;
    }
    .section4-bottomdiv img
    {
        width: 100%;
        height: 100%;
    }
        .section5
        {
            height: 140px;
        }
        .section5-div
        {width: 97%;
            height: 100px;
            margin-left: 15px;
            margin-top: 20px;
        }
    .section5-div img
    {width: 100%;
        height: 100%;
    }
    .section6
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section6-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section6-topdiv-span2:hover
    {
        color: orangered;
    }
    .section6-topdiv .section6-topdiv-img2
    {
        display: none;
    }
    .section6-bottomdiv
    {
        height: 610px;
    }
    .section6-bottomdiv .section6-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
        background-color: palegoldenrod;
    }
    .section6-bottomdiv .section6-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section6-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section6-bottomdiv-right-bottom div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section6-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section6-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section6-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }


    .section7
    {
        height: 120px;
        background-color: whitesmoke;

    }
    .section7-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 0px;
        background-color: whitesmoke;
    }
    .section7-div img
    {width: 100%;
        height: 100%;
    }
    .section8
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section8-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section8-topdiv li
    {
         list-style: none;
         display: inline ;
         height: 40px;
       line-height: 40px;
        border-bottom: 2px solid whitesmoke;
    }
    .section8-bottomdiv
    {
        height: 610px;
    }
    .section8-bottomdiv .section8-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
    }
    .section8-bottomdiv .section8-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section8-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section8-bottomdiv-right-bottom>div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section8-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section8-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section8-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }

    .section9
    {
        height: 120px;
        background-color: whitesmoke;
    }
    .section9-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 0px;
        background-color: whitesmoke;
    }
    .section9-div img
    {width: 100%;
        height: 100%;
    }
    .section10
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section10-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section10-topdiv li
    {
        list-style: none;
        display: inline ;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid whitesmoke;
    }
    .section10-bottomdiv
    {
        height: 610px;
    }
    .section10-bottomdiv .section10-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
    }
    .section10-bottomdiv .section10-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section10-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section10-bottomdiv-right-bottom>div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section10-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section10-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section10-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }

    .section11
    {
        height: 120px;
        background-color: whitesmoke;
    }
    .section11-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 0px;
        background-color: whitesmoke;
    }
    .section11-div img
    {width: 100%;
        height: 100%;
    }
    .section12
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section12-topdiv li
    {
        list-style: none;
        display: inline ;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid whitesmoke;
    }
    .section12-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section12-bottomdiv
    {
        height: 610px;
    }
    .section12-bottomdiv .section12-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
    }
    .section12-bottomdiv .section12-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section12-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section12-bottomdiv-right-bottom>div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section12-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section12-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section12-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }

    .section13
    {
        height: 120px;
        background-color: whitesmoke;
    }
    .section13-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 0px;
        background-color: whitesmoke;
    }
    .section13-div img
    {width: 100%;
        height: 100%;
    }
    .section14
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section14-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section14-topdiv li
    {
        list-style: none;
        display: inline ;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid whitesmoke;
    }
    .section14-bottomdiv
    {
        height: 610px;
    }
    .section14-bottomdiv .section14-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
    }
    .section14-bottomdiv .section14-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section14-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section14-bottomdiv-right-bottom>div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section14-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section14-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section14-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }

    .section15
    {
        height: 140px;
        background-color: whitesmoke;
    }
    .section15-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 20px;
        background-color: whitesmoke;
    }
    .section15-div img
    {width: 100%;
        height: 100%;
    }
    .section16
    {
        height: 720px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section16-topdiv
    {
        height: 60px;
        line-height: 60px;
    }
    .section16-topdiv li
    {
        list-style: none;
        display: inline ;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid whitesmoke;
    }
    .section16-bottomdiv
    {
        height: 610px;
    }
    .section16-bottomdiv .section16-bottomdiv-left
    {
        float: left;
        height: 610px;
        width: 20%;
        margin-left: 15px;
    }
    .section16-bottomdiv .section16-bottomdiv-right
    {
        float: left;
        height: 610px;
        width: 76%;
        margin-left: 15px;
    }
    .section16-bottomdiv-right-top div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section16-bottomdiv-right-bottom>div
    {
        float: left;
        height: 300px;
        width: 23%;
        margin-left: 17px;
    }
    .section16-bottomdiv-right img
    {
        width: 100%;
        height: 100%;
    }
    .section16-bottomdiv-left img:hover
    {
        transform: translate(0, -4px);
    }
    .section16-bottomdiv-right img:hover
    {
        transform: translate(0, -4px);
    }

    .section17
    {
        height: 140px;
        background-color: whitesmoke;
    }
    .section17-div
    {width: 97%;
        height: 100px;
        margin-left: 15px;
        margin-top: 20px;
        background-color: white;
    }
    .section17-div img
    {width: 100%;
        height: 100%;
    }
    .section18
    {
        height: 370px;
        width: 100%;
        background-color: whitesmoke;
    }
    .section18-topdiv
    {
        float: top;
        height: 60px;
        line-height: 60px;
    }
    .section18-topdiv-span2:hover
    {
        color: orangered;
    }
    .section18-bottomdiv
    {
        float: top;
        height: 280px;
    }
   .section18-bottomdiv div
   {
       float: left;
       height: 280px;
       text-align: center;
       line-height: 60px;
       width: 23%;
       margin-left: 17px;
       background-color: white;

   }
    .section18-bottomdiv div img{
    width: 100%;
        height: 180px;
    }
    .section18-bottomdiv div:hover{
        transform: translate(0, -4px);
    }
    .section18-bottomdiv div span{
        margin-top: 175px;
        color:dimgray;
        font-size: 15px;
    }
    .section18-bottomdiv > div >div
    {
        background-color: black;
    }
    .section18-bottomdiv > div >div:hover
    {
        background-color: orangered;
    }
     footer
     {
         height: 515px;
     }
    .footer-top-div
    {
        float: top;
        height: 75px;
        text-align: center;
        background-color: whitesmoke;
        border-bottom: 1px solid silver;
    }
        .footer-top-div li
        {
            display: inline-block;
            height: 75px;
            line-height: 75px;
            width: 19%;
            color: dimgray;
        }
        .footer-middle-div
        {
            float: top;
            height: 200px;
        }
    .footer-middle-div-left
    {
        float: left;
        width: 80%;
        height: 140px;
        margin-top: 30px;
        border-right: 1px solid silver;
    }
        .footer-middle-div-right
        {
            float: left;
            width: 19%;
            height: 140px;
            margin-top: 30px;
            text-align: center;

        }
        .footer-middle-div-left div
        {
            float: left;
            width: 16%;
            height: 140px;
            margin-left: 4px;
        }
    .footer-middle-div-left div span
    {
        margin-left: 10px;
    }
    .footer-middle-div-left div ul
    {
list-style: none;
        margin-left: -30px;
        font-size: 13px;
        font-weight: 400;
        color: dimgray;
        margin-top: 25px;
    }
    .footer-middle-div-left div ul li
    {
        list-style: none;
        margin-top: 15px;
    }
    .footer-middle-div-left div ul li:hover
    {
color: darkorange;
    }
    .footer-middle-div-right li
    {
        list-style: none;
        margin-top: 10px;
    }
        .footer-bottom-div {
            height: 240px;
        }
        .footer-bottom-div img
        {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body onload="init();changecolor()">
<header>
    <div class="top-left-div">
    <ul class="topul">
        <li><span>小米商城</span></li>
        <span>|</span>
        <li><span>MIUI</span></li>
        <span>|</span>
        <li><span>loT</span></li>
        <span>|</span>
        <li><span>云服务</span></li>
        <span>|</span>
        <li><span>金融</span></li>
        <span>|</span>
        <li><span>有品</span></li>
        <span>|</span>
        <li><span>小爱开放平台</span></li>
        <span>|</span>
        <li><span>企业团购</span></li>
        <span>|</span>
        <li><span>资质证照</span></li>
        <span>|</span>
        <li><span>协议规则</span></li>
        <span>|</span>
        <li><span>下载app</span></li>
        <span>|</span>
        <li><span>Select Location</span></li>
    </ul>
    </div>
    <div class="top-right-div">
        <ul class="topul">
        <li><span>登录</span></li>
        <span>|</span>
        <li><span>注册</span></li>
        <span>|</span>
        <li><span>消息通知</span></li>
        </ul>
    </div>
    <div class="shopcardiv"onmouseover="addshoppingdiv()"onmouseout="cancelshoppingdiv()">
            <img class="img1" src="images/shoppingcar1.png">
        <img class="img2"src="images/shoppingcar2.png">
        <li><span>购物车(0)</span></li>
        </div>
    </div>
</header>
<section>
    <div class="fixeddiv"id='fixeddiv'style="position: fixed;left:1100px;top:300px;height: 170px;width:120px;background-color:white;z-index: 1000 !important;text-align: center;display: none">
    <img src="images/logo.png"style="width:100px;height:100px;margin:10px 10px">
        <li style="list-style: none"><span style="font-size: 14px;color: dimgray">手机扫一扫</span></li>
        <li style="list-style: none"><span style="font-size: 14px;color: dimgray">一分赢好礼</span></li>
    </div>
    <ul class="fixedul1"style="position: fixed;left:1140px;top:335px;height: 140px;width:80px;list-style: none">
        <li id="fixedul1-li2"><span>个人中心</span></li>
        <li id="fixedul1-li3"style="margin-top: 44px"><span>售后服务</span></li>
        <li id="fixedul1-li4"style="margin-top: 80px"><span>人工客服</span></li>
        <li id="fixedul1-li5"style="margin-top: 115px"><span>购物车</span></li>
    </ul>
    <ul class="fixedul" style="position: fixed;left:1230px;top:300px;width:20px;height: 175px;list-style: none">
         <li onmouseover="Onmouseoverfixedli(1)"onmouseout="Onmouseoutfixedli(1)"><img src="images/fixed1.png"id="fixedimg1"></li>
        <li onmouseover="Onmouseoverfixedli(2)"onmouseout="Onmouseoutfixedli(2)"><img src="images/fixed3.png"id="fixedimg2"></li>
        <li onmouseover="Onmouseoverfixedli(3)"onmouseout="Onmouseoutfixedli(3)"><img src="images/fixed5.png"id="fixedimg3"></li>
        <li onmouseover="Onmouseoverfixedli(4)"onmouseout="Onmouseoutfixedli(4)"><img src="images/fixed7.png"id="fixedimg4"></li>
        <li onmouseover="Onmouseoverfixedli(5)"onmouseout="Onmouseoutfixedli(5)"><img src="images/fixed9.png"id="fixedimg5"></li>
    </ul>
<div class="section1">
    <div class="section1-left">
        <div class="xiaomilogodiv"title="小米官网">
            <img class='img1'src="images/xiaomilogo1.png">
            <img class='img2'src="images/xiaomilogo2.png">
        </div>

    </div>
    <div class="section1-middle">
        <ul class="section1-middle-ul">
        <li onmouseout="Onmouseoutli(1)" onmouseover="Onmouseoverli(1)"><span>小米手机</span></li>
        <li onmouseout="Onmouseoutli(2)" onmouseover="Onmouseoverli(2)"><span>红米</span></li>
        <li onmouseout="Onmouseoutli(3)" onmouseover="Onmouseoverli(3)"><span>电视</span></li>
        <li onmouseout="Onmouseoutli(4)" onmouseover="Onmouseoverli(4)"><span>笔记本</span></li>
        <li onmouseout="Onmouseoutli(5)" onmouseover="Onmouseoverli(5)"><span>家电</span></li>
        <li onmouseout="Onmouseoutli(6)" onmouseover="Onmouseoverli(6)"><span>路由器</span></li>
        <li onmouseout="Onmouseoutli(7)" onmouseover="Onmouseoverli(7)"><span>智能硬件</span></li>
        <li><span>服务</span></li>
        <li><span>社区</span></li>
        </ul>
    </div>
    <div class="section1-right">
        <div class="float-shoppingcar"id="float-shoppingcar">
       <span>购物车中还没有商品,赶快选购吧</span>
        </div>
        <div style="width: 250px;height: 46px;float:left;margin-left: 45px;margin-top: 25px;">
        <input type="text"style="width: 250px;height: 44px;border: 1px solid gainsboro"placeholder="点击此处搜索商品">
        </div>
        <div class="rightdiv" style="width: 50px;height: 46px;float:left;margin-left: 3px;margin-top: 25px;border-right: 1px solid gainsboro;
     border-top: 1px solid gainsboro;border-bottom: 1px solid gainsboro;">
                   <img class="img1" src="images/fdj1.png"style="width: 30px;height: 30px;margin: 10px 10px">
                    <img class="img2"src="images/fdj2.png"style="width: 30px;height: 30px;margin: 10px 10px;">
        </div>
    </div>
</div>
    <div class="section2">

        <div class="section2-left-div">
                <ul class="section2-left-div-ul">
                    <li onmouseout="Onmouseoutleftli(1)" onmouseover="Onmouseoverleftli(1)"><span>手机 电话卡</span><i><img src="images/toright.png"style="margin-left: 84px"></i></li>
                    <li onmouseout="Onmouseoutleftli(2)" onmouseover="Onmouseoverleftli(2)"><span>电视 盒子</span><img src="images/toright.png"></li>
                    <li onmouseout="Onmouseoutleftli(3)" onmouseover="Onmouseoverleftli(3)"><span>笔记本 显示器 平板</span><img src="images/toright.png"style="margin-left: 30px"></li>
                    <li onmouseout="Onmouseoutleftli(4)" onmouseover="Onmouseoverleftli(4)"><span>家电 插线板</span><img src="images/toright.png"style="margin-left: 84px"></li>
                    <li onmouseout="Onmouseoutleftli(5)" onmouseover="Onmouseoverleftli(5)"><span>出行 穿戴</span><img src="images/toright.png"></li>
                    <li onmouseout="Onmouseoutleftli(6)" onmouseover="Onmouseoverleftli(6)"><span>智能 路由器</span><img src="images/toright.png"style="margin-left: 84px"></li>
                    <li onmouseout="Onmouseoutleftli(7)" onmouseover="Onmouseoverleftli(7)"><span>电源 配件</span><img src="images/toright.png"></li>
                    <li onmouseout="Onmouseoutleftli(8)" onmouseover="Onmouseoverleftli(8)"><span>健康 儿童</span><img src="images/toright.png"></li>
                    <li onmouseout="Onmouseoutleftli(9)" onmouseover="Onmouseoverleftli(9)"><span>耳机 音箱</span><img src="images/toright.png"></li>
                    <li onmouseout="Onmouseoutleftli(10)"onmouseover="Onmouseoverleftli(10)"><span>生活 箱包</span><img src="images/toright.png"></li>
                </ul>
        </div>
        <div class="section2-right-div"style="position: relative">
            <img src="images/sc2tp1.jpg"id="sc2lunbo"index="1">
              <div class="keydiv"style="position:absolute;left: 10px;top:200px;width: 40px;height: 80px;text-align: center"onclick="toleft()">
            <img src="images/zuo.png"style="z-index: 2;width: 20px;height: 50px;margin-top: 15px;">
              </div>
            <div class="keydiv"style="position:absolute;right: 10px;top:200px;width: 40px;height: 80px;text-align: center"onclick="toright()">
            <img src="images/you.png"style="z-index: 2;width: 20px;height: 50px;margin-top: 15px;">
            </div>
            <ul>
                <li id='li1'index="1"onclick="clickli(1)"></li>
                <li id='li2'index="2"onclick="clickli(2)"></li>
                <li id='li3'index="3"onclick="clickli(3)"></li>
                <li id='li4'index="4"onclick="clickli(4)"></li>
                <li id='li5'index="5"onclick="clickli(5)"></li>
            </ul>
            <div class="float-div1"id="float-div1">
                <div id="float-div1-1">
                    <li>
                        <img src=""id="float-div1-img1">
                        <span id="float-div1-span1"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img2">
                        <span id="float-div1-span2"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img3">
                        <span id="float-div1-span3"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img4">
                        <span id="float-div1-span4"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img5">
                        <span id="float-div1-span5"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img6">
                        <span id="float-div1-span6"></span>
                    </li>

                </div>
                <div id="float-div1-2">
                    <li>
                        <img src=""id="float-div1-img7">
                        <span id="float-div1-span7"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img8">
                        <span id="float-div1-span8"></span>

                    </li>
                    <li>
                        <img src=""id="float-div1-img9">
                        <span id="float-div1-span9"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img10">
                        <span id="float-div1-span10"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img11">
                        <span id="float-div1-span11"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img12">
                        <span id="float-div1-span12"></span>
                    </li>

                </div>
                <div id="float-div1-3">
                    <li>
                        <img src=""id="float-div1-img13">
                        <span id="float-div1-span13"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img14">
                        <span id="float-div1-span14"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img15">
                        <span id="float-div1-span15"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img16">
                        <span id="float-div1-span16"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img17">
                        <span id="float-div1-span17"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img18">
                        <span id="float-div1-span18"></span>
                    </li>

                </div>
                <div id="float-div1-4">
                    <li>
                        <img src=""id="float-div1-img19">
                        <span id="float-div1-span19"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img20">
                        <span id="float-div1-span20"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img21">
                        <span id="float-div1-span21"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img22">
                        <span id="float-div1-span22"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img23">
                        <span id="float-div1-span23"></span>
                    </li>
                    <li>
                        <img src=""id="float-div1-img24">
                        <span id="float-div1-span24"></span>
                    </li>

                </div>
            </div>
        </div>


        <div id="section2-float-div"onmouseover="Onmouseoverdiv(this)"onmouseover="Onmouseoutdiv(this)">
            <div style="width: 100%;height: 100%;margin-left: 15px">
                <div>
                    <div style='border-left: 1px solid white'><img src="images/float1.png"id="float-img1"></div>
                    <div>
                        <li><span id="float-span1">小米CC9 Pro</span></li>
                        <li><span id="float-pricespan1">2799元起</span></li>
                    </div>
                </div>
                <div>
                    <div><img src="images/float2.png"id="float-img2"></div>
                    <div>
                        <li><span id="float-span2">小米9 Pro 5G</span></li>
                        <li><span id="float-pricespan2">3699元起</span></li>
                    </div>
                </div>
                <div>
                    <div><img src="images/float3.png"id="float-img3"></div>
                    <div>
                        <li><span id="float-span3">小米CC9</span></li>
                        <li id="float-pricespan3"><span>1699元</span></li>
                    </div>
                </div>
                <div>
                    <div><img src="images/float4.png"id="float-img4"></div>
                    <div>
                        <li><span id="float-span4">小米CC9e</span></li>
                        <li id="float-pricespan4"><span>1099元起</span></li>
                    </div>
                </div>
                <div>
                    <div><img src="images/float6.png"id="float-img5"></div>
                    <div>
                        <li><span id="float-span5">小米CC9 美图定制版</span></li>
                        <li id="float-pricespan5"><span>1999元</span></li>
                    </div>
                </div>
                <div>
                    <div><img src="images/float1.png"id="float-img6"></div>
                    <div>
                        <li><span id="float-span6">小米MIX 3</span></li>
                        <li id="float-pricespan6"><span>2599元</span></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section3">
        <div class="section3-div1">
             <div>
                  <div>
                      <img src="images/sc3tp4.png">
                      <li><span>小米秒杀</span></li>
                  </div>
                   <div>
                       <img src="images/sc3tp5.png">
                       <li><span>企业团购</span></li>
                   </div>
                 <div>
                     <img src="images/sc3tp6.png">
                     <li><span>F码通道</span></li>
                 </div>
             </div>
            <div>
                <div>
                    <img src="images/sc3tp7.png">
                    <li><span>米粉卡</span></li>

                </div>
                <div>
                    <img src="images/sc3tp8.png">
                    <li><span>以旧换新</span></li>

                </div>
                <div><img src="images/sc3tp9.png">
                    <li><span>话费充值</span></li>
                </div>
            </div>
        </div>
        <div class="section3-div2">
            <img src="images/sc3tp1.jpg">
        </div>
        <div class="section3-div2"><img src="images/sc3tp2.jpg"></div>
        <div class="section3-div2"><img src="images/sc3tp3.jpg"></div>
    </div>
<div class="section4">
    <div class="section4-topdiv">
        <li style="display: inline"><span style="font-size: 20px;margin-left: 15px;">小米闪购</span></li>
        <li id='section4-topdiv-li1'style="margin-left: 1050px;width: 32px;height:22px;line-height:22px;margin-top: 19px;border: 2px solid gainsboro;">
                    <img src="images/toz1.png"style="width: 18px;height: 18px;margin-left: 5px"index="1"id="section4-topdiv-img1"
                    onclick="dealwithleft()"onmouseout="Onmouseoutsc4img(1)" onmouseover="Onmouseoversc4img(1)">
        </li>
        <li id='section4-topdiv-li2'style="margin-left: 0px;width: 32px;height:22px;line-height:22px;margin-top: 19px;border: 2px solid gainsboro">
                     <img src="images/tor2.png"style="width: 18px;height: 18px;margin-left: 5px"index="1"id="section4-topdiv-img2"
                     onclick="dealwithright()"onmouseout="Onmouseoutsc4img(2)" onmouseover="Onmouseoversc4img(2)">
        </li>
    </div>
    <div class="section4-bottomdiv">
        <div class="section4-bottomdiv-div1"style="border-top: 1px solid crimson"><img src="images/sc4tp1.png"></div>
        <div class="section4-bottomdiv-div2"style="border-top: 1px solid orange"><img src="images/sc4tp2.png"id="section4-bottomdiv-img1"></div>
        <div class="section4-bottomdiv-div2"style="border-top: 1px solid steelblue"><img src="images/sc4tp3.png"id="section4-bottomdiv-img2"></div>
        <div class="section4-bottomdiv-div2"style="border-top: 1px solid yellowgreen"><img src="images/sc4tp4.png"id="section4-bottomdiv-img3"></div>
        <div class="section4-bottomdiv-div2"style="border-top: 1px solid chartreuse"><img src="images/sc4tp5.png"id="section4-bottomdiv-img4"></div>
    </div>
</div>
    <div class="section5">
        <div class="section5-div">
            <img src="images/sc5tp.jpg">
        </div>
    </div>
    <div class="section6">
        <div class="section6-topdiv">
        <span style="font-size: 20px;margin-left: 15px;">手机</span>
        <span style="font-size: 15px;margin-left: 86%;"class="section6-topdiv-span2"onmouseout="Onmouseoutspan(this)" onmouseover="Onmouseoverspan(this)">查看全部</span>
        <img class="section6-topdiv-img" src="images/xy1.png"style="width: 25px;height: 25px;margin-left: 4px;margin-top:-3px;vertical-align: middle"
             onmouseout="Onmouseoutimg(this)" onmouseover="Onmouseoverimg(this)">
    </div>
        <div class="section6-bottomdiv">
           <div class="section6-bottomdiv-left"><img src="images/sc6tp1.jpg" style="width: 100%;height: 100%"></div>
            <div class="section6-bottomdiv-right">
                <div style="width: 100%;height: 310px;"class="section6-bottomdiv-right-top">
                    <div><img src="images/sc6tp2.png"></div>
                    <div><img src="images/sc6tp3.png"></div>
                    <div><img src="images/sc6tp4.png"></div>
                    <div><img src="images/sc6tp5.png"></div>
                </div>
                <div style="width: 100%;height: 300px"class="section6-bottomdiv-right-bottom">
                    <div><img src="images/sc6tp6.png"></div>
                    <div><img src="images/sc6tp7.png"></div>
                    <div><img src="images/sc6tp8.png"></div>
                    <div><img src="images/sc6tp9.png"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="section7">
        <div class="section7-div">
            <img src="images/sc7tp.jpg">
        </div>
    </div>
    <div class="section8">
        <div class="section8-topdiv">
            <li><span style="font-size: 20px;margin-left: 15px;">家电</span></li>
            <li id='section8-topdiv-li1'style="margin-left: 1040px;width: 30px;border-bottom: 2px solid orangered">
                <span style="color: orangered" id='section8-topdiv-span1'onmouseover="Onmouseovercommonspan(1)"onmouseover="Onmouseoutcommonspan(1)">热门</span>
            </li>
            <li id='section8-topdiv-li2'style="margin-left: 20px;width: 45px;">
                <span id='section8-topdiv-span2'onmouseover="Onmouseovercommonspan(2)"onmouseover="Onmouseoutcommonspan(2)">电视影音</span>
            </li>
        </div>
        <div class="section8-bottomdiv">
            <div class="section8-bottomdiv-left">
                <img src="images/sc8tp1.jpg" style="width: 100%;height: 295px">
                <img src="images/sc8tp1.jpg" style="width: 100%;height: 300px;margin-top: 10px">
        </div>
            <div class="section8-bottomdiv-right">
                <div style="width: 100%;height: 310px;"class="section8-bottomdiv-right-top">

                    <div><img src="images/sc8tp3.png"id="section8-bottomdiv-right-img1"></div>
                    <div><img src="images/sc8tp4.png"id="section8-bottomdiv-right-img2"></div>
                    <div><img src="images/sc8tp5.png"id="section8-bottomdiv-right-img3"></div>
                    <div><img src="images/sc8tp6.png"id="section8-bottomdiv-right-img4"></div>
                </div>
                <div style="width: 100%;height: 300px"class="section8-bottomdiv-right-bottom">
                    <div><img src="images/sc8tp7.png"id="section8-bottomdiv-right-img5"></div>
                    <div><img src="images/sc8tp8.png"id="section8-bottomdiv-right-img6"></div>
                    <div><img src="images/sc8tp9.png"id="section8-bottomdiv-right-img7"></div>
                    <div>
                        <div style="height: 155px;float: top;width: 100%">
                               <img src="images/sc8tp10.png"id="section8-bottomdiv-right-img8"style="width: 100%;height: 145px;">
                        </div>
                        <div style="height: 145px;float: top;width: 100%">
                            <img src="images/sc8tp11.png"id="section8-bottomdiv-right-img9"style="width: 100%;height: 100%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section9">
        <div class="section9-div">
            <img src="images/sc9tp.jpg">
        </div>
    </div>
    <div class="section10">
        <div class="section10-topdiv">
            <span style="font-size: 20px;margin-left: 15px;">智能</span>
            <li id='section10-topdiv-li1'style="margin-left: 1000px;width: 30px;border-bottom: 2px solid orangered">
                <span style="color: orangered" id='section10-topdiv-span1'onmouseover="Onmouseovercommonspan(3)"onmouseover="Onmouseovercommonspan(3)">热门</span>
            </li>
            <li id='section10-topdiv-li2'style="margin-left: 20px;width: 45px;">
                <span id='section10-topdiv-span2'onmouseover="Onmouseovercommonspan(4)"onmouseover="Onmouseovercommonspan(4)">安防</span>
            </li>
            <li id='section10-topdiv-li3'style="margin-left: 20px;width: 45px;">
                <span id='section10-topdiv-span3'onmouseover="Onmouseovercommonspan(5)"onmouseover="Onmouseovercommonspan(5)">出行</span>
            </li>
        </div>
        <div class="section10-bottomdiv">
            <div class="section10-bottomdiv-left">
                <img src="images/sc10tp1.jpg" style="width: 100%;height: 295px">
                <img src="images/sc10tp2.jpg" style="width: 100%;height: 300px;margin-top: 10px">
            </div>
            <div class="section10-bottomdiv-right">
                <div style="width: 100%;height: 310px;"class="section10-bottomdiv-right-top">

                    <div><img src="images/sc10tp3.png"id="section10-bottomdiv-right-img1"></div>
                    <div><img src="images/sc10tp4.png"id="section10-bottomdiv-right-img2"></div>
                    <div><img src="images/sc10tp5.png"id="section10-bottomdiv-right-img3"></div>
                    <div><img src="images/sc10tp6.png"id="section10-bottomdiv-right-img4"></div>
                </div>
                <div style="width: 100%;height: 300px"class="section10-bottomdiv-right-bottom">
                    <div><img src="images/sc10tp7.png"id="section10-bottomdiv-right-img5"></div>
                    <div><img src="images/sc10tp8.png"id="section10-bottomdiv-right-img6"></div>
                    <div><img src="images/sc10tp9.png"id="section10-bottomdiv-right-img7"></div>
                    <div>
                        <div style="height: 155px;float: top;width: 100%">
                            <img src="images/sc10tp10.png"style="width: 100%;height: 145px;"id="section10-bottomdiv-right-img8">
                        </div>
                        <div style="height: 145px;float: top;width: 100%">
                            <img src="images/sc8tp11.png"style="width: 100%;height: 100%"id="section10-bottomdiv-right-img9">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section11">
        <div class="section11-div">
            <img src="images/sc11tp.jpg">
        </div>
    </div>
    <div class="section12">
        <div class="section12-topdiv">
            <span style="font-size: 20px;margin-left: 15px;">搭配</span>
            <li id='section12-topdiv-li1'style="margin-left: 1030px;width: 30px;border-bottom: 2px solid orangered">
                <span style="color: orangered" id='section12-topdiv-span1'onmouseover="Onmouseovercommonspan(6)"onmouseover="Onmouseoutcommonspan(6)">热门</span>
            </li>
            <li id='section12-topdiv-li2'style="margin-left: 20px;width: 45px;">
                <span id='section12-topdiv-span2'onmouseover="Onmouseovercommonspan(7)"onmouseover="Onmouseoutcommonspan(7)">耳机音箱</span>
            </li>
        </div>
        <div class="section12-bottomdiv">
            <div class="section12-bottomdiv-left">
                <img src="images/sc12tp1.jpg" style="width: 100%;height: 295px">
                <img src="images/sc12tp2.jpg" style="width: 100%;height: 300px;margin-top: 10px">
            </div>
            <div class="section12-bottomdiv-right">
                <div style="width: 100%;height: 310px;"class="section12-bottomdiv-right-top">

                    <div><img src="images/sc12tp3.png"id="section12-bottomdiv-right-img1"></div>
                    <div><img src="images/sc12tp4.png"id="section12-bottomdiv-right-img2"></div>
                    <div><img src="images/sc12tp5.png"id="section12-bottomdiv-right-img3"></div>
                    <div><img src="images/sc12tp6.png"id="section12-bottomdiv-right-img4"></div>
                </div>
                <div style="width: 100%;height: 300px"class="section12-bottomdiv-right-bottom">
                    <div><img src="images/sc12tp7.png"id="section12-bottomdiv-right-img5"></div>
                    <div><img src="images/sc12tp8.png"id="section12-bottomdiv-right-img6"></div>
                    <div><img src="images/sc12tp9.png"id="section12-bottomdiv-right-img7"></div>
                    <div>
                        <div style="height: 155px;float: top;width: 100%">
                            <img src="images/sc12tp10.png"style="width: 100%;height: 145px;"id="section12-bottomdiv-right-img8">
                        </div>
                        <div style="height: 145px;float: top;width: 100%">
                            <img src="images/sc8tp11.png"style="width: 100%;height: 100%"id="section12-bottomdiv-right-img9">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section13">
        <div class="section13-div">
            <img src="images/sc13tp.jpg">
        </div>
    </div>
    <div class="section14">
        <div class="section14-topdiv">
            <span style="font-size: 20px;margin-left: 15px;">配件</span>
            <li id='section14-topdiv-li1'style="margin-left: 990px;width: 30px;border-bottom: 2px solid orangered">
                <span style="color: orangered" id='section14-topdiv-span1'onmouseover="Onmouseovercommonspan(8)"onmouseover="Onmouseovercommonspan(8)">热门</span>
            </li>
            <li id='section14-topdiv-li2'style="margin-left: 20px;width: 45px;">
                <span id='section14-topdiv-span2'onmouseover="Onmouseovercommonspan(9)"onmouseover="Onmouseovercommonspan(9)">保护套</span>
            </li>
            <li id='section14-topdiv-li3'style="margin-left: 20px;width: 45px;">
                <span id='section14-topdiv-span3'onmouseover="Onmouseovercommonspan(10)"onmouseover="Onmouseovercommonspan(10)">充电器</span>
            </li>
        </div>
        <div class="section14-bottomdiv">
            <div class="section14-bottomdiv-left">
                <img src="images/sc14tp1.jpg" style="width: 100%;height: 295px">
                <img src="images/sc14tp2.jpg" style="width: 100%;height: 300px;margin-top: 10px">
            </div>
            <div class="section14-bottomdiv-right">
                <div style="width: 100%;height: 310px;"class="section14-bottomdiv-right-top">

                    <div><img src="images/sc14tp3.png"id="section14-bottomdiv-right-img1"></div>
                    <div><img src="images/sc14tp4.png"id="section14-bottomdiv-right-img2"></div>
                    <div><img src="images/sc14tp5.png"id="section14-bottomdiv-right-img3"></div>
                    <div><img src="images/sc14tp6.png"id="section14-bottomdiv-right-img4"></div>
                </div>
                <div style="width: 100%;height: 300px"class="section14-bottomdiv-right-bottom">
                    <div><img src="images/sc14tp7.png"id="section14-bottomdiv-right-img5"></div>
                    <div><img src="images/sc14tp8.png"id="section14-bottomdiv-right-img6"></div>
                    <div><img src="images/sc14tp9.png"id="section14-bottomdiv-right-img7"></div>
                    <div>
                        <div style="height: 155px;float: top;width: 100%">
                            <img src="images/sc14tp10.png"style="width: 100%;height: 145px;"id="section14-bottomdiv-right-img8">
                        </div>
                        <div style="height: 145px;float: top;width: 100%">
                            <img src="images/sc8tp11.png"style="width: 100%;height: 100%"id="section14-bottomdiv-right-img9">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section15">
            <div class="section15-div">
                <img src="images/sc15tp.jpg">
            </div>
        </div>
        <div class="section16">
            <div class="section16-topdiv">
                <span style="font-size: 20px;margin-left: 15px;">周边</span>
                <li id='section16-topdiv-li1'style="margin-left: 1060px;width: 30px;border-bottom: 2px solid orangered">
                    <span style="color: orangered" id='section16-topdiv-span1'onmouseover="Onmouseovercommonspan(11)"onmouseover="Onmouseoutcommonspan(11)">热门</span>
                </li>
                <li id='section16-topdiv-li2'style="margin-left: 20px;width: 45px;">
                    <span id='section16-topdiv-span2'onmouseover="Onmouseovercommonspan(12)"onmouseover="Onmouseoutcommonspan(12)">出行</span>
                </li>
            </div>
            <div class="section16-bottomdiv">
                <div class="section16-bottomdiv-left">
                    <img src="images/sc16tp1.jpg" style="width: 100%;height: 295px">
                    <img src="images/sc16tp2.jpg" style="width: 100%;height: 300px;margin-top: 10px">
                </div>
                <div class="section16-bottomdiv-right">
                    <div style="width: 100%;height: 310px;"class="section16-bottomdiv-right-top">

                        <div><img src="images/sc16tp3.png"id="section16-bottomdiv-right-img1"></div>
                        <div><img src="images/sc16tp4.png"id="section16-bottomdiv-right-img2"></div>
                        <div><img src="images/sc16tp5.png"id="section16-bottomdiv-right-img3"></div>
                        <div><img src="images/sc14tp6.png"id="section16-bottomdiv-right-img4"></div>
                    </div>
                    <div style="width: 100%;height: 300px"class="section16-bottomdiv-right-bottom">
                        <div><img src="images/sc16tp7.png"id="section16-bottomdiv-right-img5"></div>
                        <div><img src="images/sc16tp8.png"id="section16-bottomdiv-right-img6"></div>
                        <div><img src="images/sc16tp9.png"id="section16-bottomdiv-right-img7"></div>
                        <div>
                            <div style="height: 155px;float: top;width: 100%">
                                <img src="images/sc16tp10.png"style="width: 100%;height: 145px;"id="section16-bottomdiv-right-img8">
                            </div>
                            <div style="height: 145px;float: top;width: 100%">
                                <img src="images/sc8tp11.png"style="width: 100%;height: 100%"id="section16-bottomdiv-right-img9">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section17">
                <div class="section17-div">
                    <img src="images/sc17tp.jpg">
                </div>
            </div>
            <div class="section18">
                <div class="section18-topdiv">
                    <span style="font-size: 20px;margin-left: 15px;">视频</span>
                    <span style="font-size: 15px;margin-left: 86%;"class="section18-topdiv-span2"onmouseout="Onmouseoutsc18span(this)" onmouseover="Onmouseoversc18span(this)">查看全部</span>
                    <img class="section18-topdiv-img" src="images/xy1.png"style="width: 25px;height: 25px;margin-left: 4px;margin-top:-3px;vertical-align: middle"
                         onmouseout="Onmouseoutsc18img(this)" onmouseover="Onmouseoversc18img(this)">
                </div>
                <div class="section18-bottomdiv">
                         <div title="点击播放视频">
                             <img src="images/sc18tp1.jpg">
                             <div style="width: 35px;height: 25px;border-radius:42%;position:relative;left: 10px;top:-60px;border: 2px solid white">
                             <img src="images/bf.png"style="width: 12px;height: 12px;position:relative;left: 1px;top:-17px;">
                             </div>
                             <span>小米MIX Alpha 开箱视频</span>
                         </div>
                            <div title="点击播放视频">
                                <img src="images/sc18tp2.jpg">
                                <div style="width: 35px;height: 25px;border-radius:42%;position:relative;left: 10px;top:-60px;border: 2px solid white">
                                    <img src="images/bf.png"style="width: 12px;height: 12px;position:relative;left: 1px;top:-17px;">
                                </div>
                                <span>小米5G新品手机发布会</span>
                            </div>
                            <div title="点击播放视频"><img src="images/sc18tp3.jpg">
                                <div style="width: 35px;height: 25px;border-radius:42%;position:relative;left: 10px;top:-60px;border: 2px solid white">
                                    <img src="images/bf.png"style="width: 12px;height: 12px;position:relative;left: 1px;top:-17px;">
                                </div>
                                <span>Redmi Note8 系列发布会</span>
                            </div>
                            <div title="点击播放视频"><img src="images/sc18tp4.jpg">
                                <div style="width: 35px;height: 25px;border-radius:42%;position:relative;left: 10px;top:-60px;border: 2px solid white">
                                    <img src="images/bf.png"style="width: 12px;height: 12px;position:relative;left: 1px;top:-17px;">
                                </div>
                                <span>小米电视5 创新背后的故事</span>
                            </div>

                </div>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="footer-top-div">
        <li><span>预约维修服务</span></li>
        <li><span>7天无理由退货</span></li>
        <li><span>15天免费换货</span></li>
        <li><span>满15天包邮</span></li>
        <li><span>520余家售后网点</span></li>

    </div>
    <div class="footer-middle-div">
    <div class="footer-middle-div-left">
        <div>
            <span>帮助中心</span>
            <ul>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
            </ul>
        </div>
        <div>
            <span>服务支持</span>
            <ul>
            <li>售后政策</li>
            <li>自助服务</li>
            <li>相关下载</li>
            </ul>
        </div>
        <div>
            <span>线下门店</span>
            <ul>
            <li>小米之家</li>
            <li>服务网点</li>
            <li>授权体验店</li>
            </ul>
        </div>
        <div>
            <span>关于小米</span>
            <ul>
            <li>了解小米</li>
            <li>加入小米</li>
            <li>投资者关系</li>
            </ul>
        </div>
        <div>
            <span>关注我们</span>
            <ul>
            <li>新浪微博</li>
            <li>官方微信</li>
            <li>联系我们</li>
            </ul>
        </div>
        <div>
            <span>特色服务</span>
            <ul>
            <li>F 码通道</li>
            <li>礼物码</li>
            <li>防伪查询</li>
            </ul>
        </div>
    </div>
    <div class="footer-middle-div-right">
        <li><span style="font-size: 20px;color: coral">400-100-5678</span></li>
        <li><span style="margin-top: 10px;font-size: 14px">周一至周日 8:00-18:00</span></li>
        <li><span style="font-size: 14px">(仅收市话费)</span></li>

    </div>
    </div>
    <div class="footer-bottom-div">
        <img src="images/footer.png">
    </div>

</footer>

</body>
<script>
    function init()
    {
        // this.changecolor();
setInterval('changeImg()',5000);
setInterval('changesc4Img()',8000);
    }

    function changeImg()
    {
        var str=document.getElementById('sc2lunbo').getAttribute('index');
        var i = parseInt(str);
       i++;
       if(i==6)
       {
           i=1;
       }
       else
       {
       }
        document.getElementById('sc2lunbo').src = 'images/sc2tp' + i + '.jpg';
        document.getElementById('sc2lunbo').setAttribute('index',i);
        this.changecolor();
    }
    function changesc4Img()
    {
        var str=document.getElementById('section4-topdiv-img1').getAttribute('index');
        var i = parseInt(str);
        i++;
        if(i==7)
        {
            i=1;
            document.getElementById('section4-topdiv-img1').src='images/toz1.png';
            document.getElementById('section4-topdiv-img2').src='images/tor2.png';
        }
        else if(i==2)
        {
            document.getElementById('section4-topdiv-img1').src='images/toz2.png';

        }
        else if(i==6)
        {
            document.getElementById('section4-topdiv-img2').src='images/tor1.png';

        }
        for (var j = 1; j <= 4; j++)
        {
            var img = document.getElementById('section4-bottomdiv-img' + j);
            var count = 1 + (i-1) * 4 + j;
            img.src = 'images/sc4tp' + count + '.png';
        }
        document.getElementById('section4-topdiv-img1').setAttribute('index',i);
    }
    function toleft()
    {
        var str=document.getElementById('sc2lunbo').getAttribute('index');
        var i = parseInt(str) -1;
        if(i==0)
        {
            i=5;
        }
        document.getElementById('sc2lunbo').src='images/sc2tp'+i+'.jpg';

        document.getElementById('sc2lunbo').setAttribute('index',i);
        this.changecolor();
    }
    function toright()
    {

        var str=document.getElementById('sc2lunbo').getAttribute('index');
        var i = parseInt(str) + 1;
        if(i==6)
        {
            i=1;
        }
        document.getElementById('sc2lunbo').src='images/sc2tp'+i+'.jpg';
        document.getElementById('sc2lunbo').setAttribute('index',i);
        this.changecolor();

    }
    function clickli(index)
    {
        document.getElementById('sc2lunbo').src='images/sc2tp'+index+'.jpg';
        document.getElementById('sc2lunbo').setAttribute('index',index);
        this.changecolor();
    }
    function dealwithleft()
    {
        var str=document.getElementById('section4-topdiv-img1').getAttribute('index');
        var i = parseInt(str);
        if(i>1)
        {
            document.getElementById('section4-topdiv-img1').setAttribute('index',i-1);
            for (var j = 1; j <= 4; j++)
            {
                var img = document.getElementById('section4-bottomdiv-img' + j);
                var count = 1 + (i - 2) * 4 + j;
                img.src = 'images/sc4tp' + count + '.png';
            }
            if (i==2)
            {
                document.getElementById('section4-topdiv-img1').src='images/toz1.png';

            }
            else if(i==6)
            {
                document.getElementById('section4-topdiv-img2').src='images/tor2.png';
            }
        }
    }
    function dealwithright()
    {
        var str=document.getElementById('section4-topdiv-img1').getAttribute('index');
        var i = parseInt(str);
        if(i<6)
        {
            document.getElementById('section4-topdiv-img1').setAttribute('index',i+1);
            for (var j = 1; j <= 4; j++)
            {
                var img = document.getElementById('section4-bottomdiv-img' + j);
                var count = 1 + i*4 + j;
                img.src = 'images/sc4tp' + count + '.png';
            }
            if (i==5)
            {
                document.getElementById('section4-topdiv-img2').src='images/tor1.png';

            }
            else if(i==1)
            {
                document.getElementById('section4-topdiv-img1').src='images/toz2.png';
            }
        }
    }
    function changecolor()
    { var str=document.getElementById('sc2lunbo').getAttribute('index');
        var i = parseInt(str);
        var box=document.getElementById('li'+i);
        box.style.color='darkorange';
        for(var j=1;j<=5;j++)
        {
            if(j!=i) {
                var box1 = document.getElementById('li' + j);
                box1.style.color = "gray";
            }
        }
    }
    function Onmouseoutli(index)
    {
       var div= document.getElementById('section2-float-div');
       div.style.display='none';
    }

    function Onmouseoverli(index)
    {
        var typelist=['小米CC9 Pro','小米9 Pro 5G','小米CC9','小米CC9e','小米CC9 美图定制版','小米MIX 3',
            'Redmi 8A','Redmi 8','Redmi K20 Pro 尊享版','Redmi Note 8 Pro','Redmi Note 8','Redmi 7A',
            'Redmi 红米电视 70英寸 R70A','小米壁纸电视 65英寸','小米全面屏电视 E55A','小米电视4A 32英寸','小米电视4A 英寸','小米电视4A 65英寸',
            '小米笔记本 Pro','RedmiBook 14','游戏本2019款','小米笔记本','小米笔记本air','小米笔记本air',
            '米家互联网空调','米家互联网空调C1','全自动洗衣机','洗烘一体机','小米净米机','扫地机器人',
            '小米路由器1','小米路由器2','小米路由器3','小米路由器4','小米路由器5','小米路由器6',
            '小米摄像机','小爱老师','智能门锁','触屏音箱','万能遥控板','查看全部',
        ];
        var pricelist=['2799元起','3699元起','1699元','1099元起','1999元','2599元',
            '699元起','799元','888元','1299元起','1400元','599元',
            '1699元','2599元','5699元','6599元起','1200元','3499元起',
            '5999元','6799元','7699元起','3466元','6666元','3566元',
            '2100元起','2399元','3400元','1888元','1999元','2088元',
            '199元','299元','499元起','999元起','288元','366元',
            '179元','222元','599元','666元','888元起','智能硬件',
        ]
        var div= document.getElementById('section2-float-div');
        for(var i=1;i<=6;i++)
        {
            var img=document.getElementById('float-img'+i);
            var typespan=document.getElementById('float-span'+i);
            var pricespan=document.getElementById('float-pricespan'+i);
            var count=(index-1)*6+i;
            img.src='images/float'+count+'.png';
            typespan.innerText=typelist[count-1];
            pricespan.innerText=pricelist[count-1];
        }
        div.style.display='block';
    }
    function Onmouseoutleftli(index)
    {
        var div = document.getElementById('float-div1');
        div.style.display='none';
    }
    function Onmouseoverleftli(index)
    {
        for(var k=1;k<=24;k++)
        {
            var img=document.getElementById('float-div1-img'+k);
            img.src='';
            var span=document.getElementById('float-div1-span'+k);
            span.innerText='';
        }
        var div = document.getElementById('float-div1');
        if(index==1||index==2||index==4||index==8)
        {
            div.style.width=1000+'px';
            div.style.backgroundColor="white";
            if(index==1)
            {
                var spanlist=['小米CC9 Pro','Redmi 8A','Redmi 8','小米MIX Alpha','小米9 P肉 5G','Redmi Note 8 Pro',
                    'Redmi Note 8','小米CC9','小米CC美图定制版','小米CC9e','小米MIX 3','黑鲨手机2 pro',
                    'Redmi 7A','Redmi 7','Redmi 9A','移动4G专区','电话卡','手机上门维修',
                    '云服务空间月卡','米粉卡 日租卡']
                for(var i=1;i<=20;i++)
                {
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+i+".png";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==2)
            {
                var spanlist=['小米电视5 55英寸','小米电视5 65英寸','小米电视5 75英寸','小米电视5 Pro 55英寸','小米电视5 Pro 65英寸','小米电视5 Pro 75英寸',
                    '全面屏电视1 55英寸','全面屏电视2 65英寸','全面屏电视3 75英寸','全面屏电视2 55英寸','全面屏电视2 65英寸','全面屏电视3 75英寸',
                    '小米电视4A 43英寸','小米电视4A 49英寸','小米电视4A 51英寸','小米电视4A 55英寸','小米电视4A 65英寸','小米电视4A 75英寸',
                    '小米电视4C 43英寸','小米电视4C 49英寸','小米电视4C 51英寸','小米电视4C 55英寸','小米电视4C 65英寸','小米电视4C 75英寸'
                ]
                for(var i=1;i<=24;i++)
                {
                    var j=i+20;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".png";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==4)
            {
                var spanlist=['冰箱','立式空调','挂壁空调','洗衣机','全自动洗衣机','净水器',
                    '微波炉','电烤箱','扫地机器人','吸尘器','空气净化器','电饭煲',
                    '电磁炉','电水壶','滤水壶','落地风扇','投影仪','灯具',
                    '插线板','新风机','电暖器','电压力锅','料理机','电煮水壶'
                ]
                for(var i=1;i<=24;i++)
                {
                    var j=i+57;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==8)
            {
                var spanlist=['洗衣机','剃须刀','修剪器','日光镜','牙刷','吹风机',
                    '体重秤','体脂秤','早教启智','遥控电动','积木','儿童手表',
                    '儿童滑板车','拉杆箱','自行车','婴儿推车','书包','理发器',
                    '保温杯','健身车','走步机','点读笔'
                ]
                for(var i=1;i<=22;i++)
                {
                    var j=i+121;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
        }
        else if(index==7)
        {
            div.style.width=500+'px';
                var spanlist=['移动电源','数据线', '车充','无线充','电池','自拍杆',
                    '手机壳','手机贴膜','手机支架','平板配件','黑鲨配件','其他配件',
                ];
                for(var i=1;i<=12;i++)
                {
                    var j=i+109;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
        }
        else
        {  div.style.width=750+'px';
            if (index==3)
            {

                var spanlist=['小米笔记本','小米笔记本 8A','小米笔记本 Redmi','小米笔记本 Alpha','小米笔记本 Pro2','显示器',
                    '小米平板','键盘','鼠标','小米转接器','平板配件','笔记本双肩包 pro',
                    '小米内胆包'
                ];
                for(var i=1;i<=13;i++)
                {
                    var j=i+44;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".png";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==5)
            {

                var spanlist=['小米手表','手环手表','VR','平衡车','滑板车','逆变器',
                    '平衡车配件','后视镜','智能记录仪','空气净化器','无限车充','充电宝',
                    '平衡轮'
                ];
                for(var i=1;i<=13;i++)
                {
                    var j=i+81;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==6)
            {

                var spanlist=['打印机','打印机豪华版','喷墨打印机','路由器','智能家庭','对讲机',
                    '无人机','摄像机','照相机','智能门锁','视频门铃','小爱老师',
                    '小爱音箱','云服务空间月卡','云服务空间年卡'
                ];
                for(var i=1;i<=15;i++)
                {
                    var j=i+94;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==9)
            {

                var spanlist=['小爱音箱','音箱','小爱音箱play','线控耳机','蓝牙耳机','头戴耳机',
                    '品牌耳机','蓝牙音箱','蓝牙音箱1','蓝牙音箱HD','小米耳机','蓝牙音箱HD2',
                    '小爱触屏音箱',
                ];
                for(var i=1;i<=13;i++)
                {
                    var j=i+143;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
            else if (index==10)
            {

                var spanlist=['双肩包','胸包','旅行包','运动鞋','服饰','眼镜',
                    '床垫','枕头','饰品','螺丝刀','保温杯','伞',
                    '驱蚊器','尤克里里','毛巾','米兔','笔','床'
                ];
                for(var i=1;i<=18;i++)
                {
                    var j=i+156;
                    var img=document.getElementById('float-div1-img'+i);
                    img.src="images/"+j+".jpg";
                    var span=document.getElementById('float-div1-span'+i);
                    span.innerText=spanlist[i-1];
                }
            }
        }

        div.style.display='block';
    }
    function Onmouseoutdiv(x)
    {
        x.style.display='none';

    }
    function Onmouseoverdiv(x)
    {
        x.style.display='display';
    }
    function addshoppingdiv()
    {
        var shopdiv=document.getElementById('float-shoppingcar');
        shopdiv.style.display='block';
    }
    function  cancelshoppingdiv()
    {
        var shopdiv=document.getElementById('float-shoppingcar');
        shopdiv.style.display='none';
    }
    function Onmouseoverspan(x)
    {
       var  img=document.getElementsByClassName('section6-topdiv-img');
       img[0].src='images/xy2.png';
    }
    function Onmouseoutspan(x)
    {
        var  img=document.getElementsByClassName('section6-topdiv-img');
        img[0].src='images/xy1.png';
    }
    function Onmouseoverimg(x)
    {

        var img=document.getElementsByClassName('section6-topdiv-img');
img[0].src='images/xy2.png';
    }
    function Onmouseoutimg(x)
    {
        var img=document.getElementsByClassName('section6-topdiv-img');
        img[0].src='images/xy1.png';
    }
    function Onmouseoversc4img(index)
    {
        var li=document.getElementById('section4-topdiv-li'+index);
        li.style.backgroundColor='blanchedalmond';
    }
    function Onmouseoutsc4img(index)
    {
        var li=document.getElementById('section4-topdiv-li'+index);
       li.style.backgroundColor='whitesmoke';
    }

    function Onmouseoversc18span(x)
    {
        var  img=document.getElementsByClassName('section18-topdiv-img');
        img[0].src='images/xy2.png';
    }
    function Onmouseoutsc18span(x)
    {
        var  img=document.getElementsByClassName('section18-topdiv-img');
        img[0].src='images/xy1.png';
    }
    function Onmouseoversc18img(x)
    {

        var img=document.getElementsByClassName('section18-topdiv-img');
        img[0].src='images/xy2.png';
    }
    function Onmouseoutsc18img(x)
    {
        var img=document.getElementsByClassName('section18-topdiv-img');
        img[0].src='images/xy1.png';
    }
   function Onmouseoverfixedli(index)
   {
       var img=document.getElementById('fixedimg'+index);
       img.src='images/fixed'+index*2+'.png';
       if(index!=1) {
           var li = document.getElementById('fixedul1-li' + index);
           li.style.display = 'block';
       }
       else
       {
           var div=document.getElementById('fixeddiv');
           div.style.display='block';
       }
   }
    function Onmouseoutfixedli(index)
    {
        var img=document.getElementById('fixedimg'+index);
        img.src='images/fixed'+(index*2-1)+'.png';
        if(index!=1) {
            var li = document.getElementById('fixedul1-li' + index);
            li.style.display = 'none';
        }
        else
        {
            var div=document.getElementById('fixeddiv');
            div.style.display='none';
        }
    }
    function Onmouseovercommonspan(index)
    {
    var li1=document.getElementById('section8-topdiv-li1');
        var li2=document.getElementById('section8-topdiv-li2');
        var span1=document.getElementById('section8-topdiv-span1');
        var span2=document.getElementById('section8-topdiv-span2');

        var li3=document.getElementById('section10-topdiv-li1');
        var li4=document.getElementById('section10-topdiv-li2');
        var li5=document.getElementById('section10-topdiv-li3');
        var span3=document.getElementById('section10-topdiv-span1');
        var span4=document.getElementById('section10-topdiv-span2');
        var span5=document.getElementById('section10-topdiv-span2');

        var li6=document.getElementById('section12-topdiv-li1');
        var li7=document.getElementById('section12-topdiv-li2');
        var span6=document.getElementById('section12-topdiv-span1');
        var span7=document.getElementById('section12-topdiv-span2');

        var li8=document.getElementById('section14-topdiv-li1');
        var li9=document.getElementById('section14-topdiv-li2');
        var li10=document.getElementById('section14-topdiv-li3');
        var span8=document.getElementById('section14-topdiv-span1');
        var span9=document.getElementById('section14-topdiv-span2');
        var span10=document.getElementById('section14-topdiv-span2');

        var li11=document.getElementById('section16-topdiv-li1');
        var li12=document.getElementById('section16-topdiv-li2');
        var span11=document.getElementById('section16-topdiv-span1');
        var span12=document.getElementById('section16-topdiv-span2');
        if(index==1)
        {
            li1.style.borderBottom='2px solid orangered';
            li2.style.borderBottom='2px solid whitesmoke';
            span1.style.color='orangered';
            span2.style.color='black';
            for(var i=1;i<=9;i++)
            {
                 var img=document.getElementById('section8-bottomdiv-right-img'+i);
                 img.src='images/sc8tp'+(i+2)+'.png';
            }

        }
        else if(index==2)
        {   li1.style.borderBottom='2px solid whitesmoke';
            li2.style.borderBottom='2px solid orangered';
            span1.style.color='black';
            span2.style.color='orangered';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section8-bottomdiv-right-img'+i);
                img.src='images/sc8tp'+(i+11)+'.png';
            }
        }
        else if(index==3)
        {
            li3.style.borderBottom='2px solid orangered';
            li4.style.borderBottom='2px solid whitesmoke';
            li5.style.borderBottom='2px solid whitesmoke';
            span3.style.color='orangered';
            span4.style.color='black';
            span5.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section10-bottomdiv-right-img'+i);
                img.src='images/sc10tp'+(i+2)+'.png';
            }
        }
        else if(index==4)
        {
            li4.style.borderBottom='2px solid orangered';
            li3.style.borderBottom='2px solid whitesmoke';
            li5.style.borderBottom='2px solid whitesmoke';
            span4.style.color='orangered';
            span3.style.color='black';
            span5.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section10-bottomdiv-right-img'+i);
                img.src='images/sc10tp'+(i+11)+'.png';
            }
        }
        else if(index==5)
        {
            for(var k=1;k<=9;k++)
            {
                var img=document.getElementById('section10-bottomdiv-right-img'+k);
                img.src='';
            }
            li5.style.borderBottom='2px solid orangered';
            li3.style.borderBottom='2px solid whitesmoke';
            li4.style.borderBottom='2px solid whitesmoke';
            span5.style.color='orangered';
            span3.style.color='black';
            span4.style.color='black';
            for(var i=1;i<=8;i++)
            {
                var img=document.getElementById('section10-bottomdiv-right-img'+i);
                img.src='images/sc10tp'+(i+20)+'.png';
            }

        }
        else if(index==6)
        {
            li6.style.borderBottom='2px solid orangered';
            li7.style.borderBottom='2px solid whitesmoke';
            span6.style.color='orangered';
            span7.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section12-bottomdiv-right-img'+i);
                img.src='images/sc12tp'+(i+2)+'.png';
            }

        }
        else if(index==7)
        {
            li6.style.borderBottom='2px solid whitesmoke';
            li7.style.borderBottom='2px solid orangered';
            span6.style.color='black';
            span7.style.color='orangered';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section12-bottomdiv-right-img'+i);
                img.src='images/sc12tp'+(i+11)+'.png';
            }
        }
        else if(index==8)
        {
            li8.style.borderBottom='2px solid orangered';
            li9.style.borderBottom='2px solid whitesmoke';
            li10.style.borderBottom='2px solid whitesmoke';
            span8.style.color='orangered';
            span9.style.color='black';
            span10.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section14-bottomdiv-right-img'+i);
                img.src='images/sc14tp'+(i+2)+'.png';
            }
        }
        else if(index==9)
        {
            li9.style.borderBottom='2px solid orangered';
            li8.style.borderBottom='2px solid whitesmoke';
            li10.style.borderBottom='2px solid whitesmoke';
            span9.style.color='orangered';
            span8.style.color='black';
            span10.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section14-bottomdiv-right-img'+i);
                img.src='images/sc14tp'+(i+11)+'.png';
            }
        }
        else if(index==10)
        {
            for(var k=1;k<=9;k++)
            {
                var img=document.getElementById('section14-bottomdiv-right-img'+k);
                img.src='';
            }
            li10.style.borderBottom='2px solid orangered';
            li8.style.borderBottom='2px solid whitesmoke';
            li9.style.borderBottom='2px solid whitesmoke';
            span10.style.color='orangered';
            span8.style.color='black';
            span9.style.color='black';
            for(var i=1;i<=8;i++)
            {
                var img=document.getElementById('section14-bottomdiv-right-img'+i);
                img.src='images/sc10tp'+(i+20)+'.png';
            }

        }
        else if(index==11)
        {
            li11.style.borderBottom='2px solid orangered';
            li12.style.borderBottom='2px solid whitesmoke';
            span11.style.color='orangered';
            span12.style.color='black';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section16-bottomdiv-right-img'+i);
                img.src='images/sc16tp'+(i+2)+'.png';
            }

        }
        else if(index==12)
        {
            li11.style.borderBottom='2px solid whitesmoke';
            li12.style.borderBottom='2px solid orangered';
            span11.style.color='black';
            span12.style.color='orangered';
            for(var i=1;i<=9;i++)
            {
                var img=document.getElementById('section16-bottomdiv-right-img'+i);
                img.src='images/sc12tp'+(i+11)+'.png';
            }
        }
    }
    function Onmouseoutcommonspan(index)
    {

    }

    var div= document.getElementById('section2-float-div');
    div.onmouseover=function ()
    {
        div.style.display='block';
    }
    div.onmouseout=function ()
    {
        div.style.display='none';

    }
    var floatdiv1= document.getElementById('float-div1');
    floatdiv1.onmouseover=function ()
    {
        floatdiv1.style.display='block';
    }
    floatdiv1.onmouseout=function ()
    {
        floatdiv1.style.display='none';

    }
    var shoppingcardiv= document.getElementById('float-shoppingcar');
    shoppingcardiv.onmouseover=function ()
    {
        shoppingcardiv.style.display='block';
    }
    shoppingcardiv.onmouseout=function ()
    {
        shoppingcardiv.style.display='none';

    }


</script>

</html>
